import React, {Component} from "react";

export  default  class Demo extends Component {
    /*       对象式        */
    state = {
        count: 0,
        name:'张三'
    }
    plus = () => {


        /*       对象式        */
        //     const {count} = this.state;
        //     //写法一
        //     this.setState({count: count + 1})
        //     //setState 是一个异步方法，数据更新后在页面渲染后，变量的值不会立即改变，当需要在页面渲染后立即得到更新后的数据时，可以在回调函数中获取。
        //     this.setState({count: count + 1},()=>{
        //         console.log(this.state.count)
        //     })
        /*       对象式        */




        /*       函数式式       */
        //函数式的好处就在于在参数列表中可以直接接收props
        this.setState((state, props) => {
            console.log('props中的值',props)
            // 提及的属性会更新，没有提的不会做任何修改。例如  count会被改外999而anme依然是张三
            return {count: 999}
        }, () => {
            console.log('可选的回调函数')
            console.log(this.state)
        })







        /*       函数式式       */
        /**
         * 使用规则
         *   对象式是函数是的语法糖
         *   1 当新状态不依赖旧状态是使用对象式，依赖使用函数式。
         *   2 如果新状态不依赖props使用对象式，依赖props使用函数式
         *   3 如果需要在执行setSate后立即获取最新的状态数据，写回调函数，否则不写回调函数。
         */
    }




    render() {
        return (
            <>
                <h2>当前数字为:{this.state.count}</h2>
                <button onClick={this.plus}>点击加一</button>
            </>
        )
    }
}
